<template>
<view class="category">
        <!-- 头部 搜索  开始-->
        <YgSearch></YgSearch>
        <!-- 头部 搜索  结束-->

        <!-- 中间内容  开始-->
        <view class="content">
            <!-- 左边 -->
            <view class="left">
                <view :class="curIndex===index?'title-item active':'title-item'"
                v-for="(item, index) in titles"
                :key="item.cat_id"
                @click="status(index)"
                >{{item}}</view>
            </view>
            <!-- 右边 -->
            <scroll-view class="right" scroll-y :scroll-top="scrollTop">
                <view class="goods" v-for="item1 in goods" :key="item1.cat_id">
                    <!-- 标题 -->
                    <view class="goods_title">
                        / {{item1.cat_name}} 
                    </view>

                    <!-- 内容 -->
                    <view class="goods_list">
                        <navigator v-for="item2 in item1.children" :key="item2.cat_id" :url="'/pages/goodslist/goodslist?id='+item2.cat_id">
                            <!-- icon -->
                            <image :src="item2.cat_icon" mode="widthFix"></image>
                            <!-- 商品标题 -->
                            <view class="subtitle">{{item2.cat_name}}</view>
                        </navigator>
                        
                    </view>
                </view>
            </scroll-view>
        </view>
        <!-- 中间  结束 -->
</view>
</template>

<script>
// 商品分类数据  全局   
let categories = []
export default {
    data(){
        return{
            // 左边分类 标题数组
            titles:[],
            // 右边商品内容
            goods:[],
            // 选中左边标题索引
            curIndex:0,
            // 设置滚动条位置
            scrollTop:0,
        }
    },
    // 数据请求
    async onLoad(){
        // 获取本地储存的商品数据  let 变量 方便使用
        let StorageCategories = uni.getStorageSync("categories")
        // console.log(StorageCategories);
        // 判断
        if(StorageCategories){
            // （存在）======
            // 判断又没过期
            if(Date.now() - StorageCategories.time>1000*30){
                // （过期）======= 过期就在请求一次后台数据
                this.getCategories()
            }else{
                //（没过期）======= 没有过期直接使用
                categories = StorageCategories.data
                this.titles = categories.map((v)=> v.cat_name)
                this.goods = categories[0].children
            }
        }else{
            // （不存在）====== 不存在就请求后台数据
            this.getCategories()
        }
    },
    
    methods:{
        // 封装接口
        async getCategories(){
        // 请求商品数据接口
        const res = await this.$u.get("/categories")
        // 全局数据赋值
        categories = res.message

        // 左侧标题赋值   
        this.titles = categories.map((v)=> v.cat_name)

        // 右侧商品内容赋值
        this.goods = categories[0].children
        uni.setStorageSync('categories', {time:Date.now(), data:res.message}) 
        },

        // 点击选中标题
        status(index){
        // 根据下标选中状态
        this.curIndex=index
        // 点击相应的下标  显示相应的内容
        this.goods = categories[index].children
        // 重置小于0不相同的位置
        this.scrollTop= Math.random()*Math.random()*Math.random()*Math.random();
    }
    }
}
</script>

<style lang="scss">
.category{
    height: 100vh;
    display: flex;
    flex-direction: column;
    .content{
        display: flex;
        flex: 1;
        overflow: hidden;
    .left{
        width: 182rpx;
        background-color: #f3f3f3;
        overflow: auto;
        .title-item{
            height: 80rpx;
            line-height: 80rpx;
            display: flex;
            justify-content: center;
            font-size: 28rpx;
            text-align: center;
        }
        .active {
                color: $themeColor;
                position: relative;
                &::before{
                    content: '';
                    position: absolute;
                    width: 5rpx;
                    height: 80%;
                    background-color: $themeColor;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                }
            }
    }
    .right{
        flex: 1;
        overflow: auto;
        .goods{
            .goods_title{
                height: 80rpx;
                line-height: 80rpx;
                display: flex;
                justify-content: center;
                font-size: 28rpx;
                align-items: center;
                
            }
            .goods_list{
                display: flex;
                flex-wrap: wrap;
                navigator{
                    width: 33.33%;
                    text-align: center;
                    image{
                        width: 60%;
                        
                    }
                    .subtitle{
                        font-size: 26rpx;
                    }
                }
            }
        }
    }
    }
    
}
</style>